<!-- Created Time:23/10/18 21:51:49 -->
<!-- Created By: Mande.Huang-->
<!-- Description: -->
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onBlur="saveFile"
    />
  </div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor } from "@wangeditor/editor";
export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "simple", // or 'simple',
      curinfo: {},
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      this.html = this.store.state.softInfo.textSoftInfo.filecontent;
      this.curinfo = this.store.state.softInfo.textSoftInfo;
      this.editor.setHtml(this.html);
    },
    async saveFile() {
      const content = this.editor.getHtml();
      const data = {
        content: content,
      };
      const id = this.curinfo.id;
      const res = await this.http.post(`/textfile/${id}/update`, data);
      const curfileInfo = JSON.parse(localStorage.getItem("curfileInfo"));
      await this.bus.$emit("getFileData", curfileInfo);
    },
  },
  mounted() {},

  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
